
import { useState } from "react"
import MsgList from './components/msgList'
import { Button } from "@nextui-org/react";
import { socket } from "../../utils/socketIoClient";
import { Chip } from "@nextui-org/react";

function QQ() { 
  let [name, setName] = useState('')
  let [msg, setMsg] = useState('')
  const submitButton = function () { 
    if (msg && msg.length > 0) { 
      socket.emit('SEND-MSG',msg)
    }
    setMsg('')
  }
  return (
    <>
      <h3>这里是仿照QQ的即时通讯工具</h3>
      <div style={{marginTop:'15px'}}>你的名字：<input  value={name} onChange={(e)=> setName(e.target.value)}></input></div>
      <div style={{ marginTop: '15px' }}>发送消息：<input value={msg} onChange={(e) => setMsg(e.target.value)}></input></div>
      <div style={{marginTop:'15px'}}><Button onClick={submitButton} color="primary" size="lg">发送消息</Button></div>
      
      <div style={{ marginTop: '15px' }}><MsgList /></div>
      
      <div style={{ marginTop: '20px' }}>
        <Chip color="default">text1</Chip> <Chip color="primary" variant="bordered">text1</Chip> 
        <Chip color="secondary" variant="light">Text2</Chip> <Chip color="success" variant="flat">Text2</Chip>
        <Chip color="warning" variant="faded">Text3</Chip> <Chip color="danger" variant="shadow">Text3</Chip>
        <Chip color="warning" variant="shadow" size="sm">Text3</Chip> <Chip color="warning" variant="shadow" size="md">Text3</Chip> <Chip onClose={() => { }}  color="warning"  variant="shadow" size="lg">Text3</Chip>
      </div>
    </>
  )
}

export default QQ